<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
		<title>虎扑跑步运动会</title>
		<link rel="stylesheet" media="screen" href="/static/css/base.css" />
		<link href='/static/css/show/sports.css' rel='stylesheet' />
        <style>

        @media screen and (max-width: 320px){
        	body{
        		min-height: 568px;
				overflow-x: hidden;
				overflow-y: scroll;

        	}
			.certificate{
				background-size: 100% 100%;
			}
            .certificate>p:first-child{
                font-size: 1rem !important;
            }
            .certificate>p:nth-child(2){
                font-size: .8rem !important;
            }
            .datetime{
                font-size: .7rem !important;
            }
			.runlogo{
				font-size: .7rem !important;
			}
			.certificate>.infor{
				font-size: .7rem !important;
			}
			.aut{
				width: 15% !important;
			}

			@media screen and (max-width: 320px){
				.certificate{
					background-size: 100% 568px;
				}
			}
        }
		body{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			overflow: hidden;
		}
		img { width: 90%;}
        .nickname{
			display: inline-block;
		    color: orange;
		    font-size: 1.1rem;
		    border-bottom: double #000;
		    margin-top: .3rem;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    overflow: hidden;
		    max-width: 75%;
        }
        .infor{
			font-size: 0.8rem;
			margin: .3rem 2rem;
        }
		.aut{
			width: 20%;
			margin-top: .2rem;
		}
        .datetime{
            font-size: 1rem;
            position: absolute;
            bottom: 16.5%;
            font-weight: bold;
            color: #f36a42;
            top: 80%;
			left: 50%;
            transform: translateX(38%);
            -webkit-transform: translateX(38%);
            -ms-transform: translateX(38%);
            -moz-transform: translateX(38%);
            -o-transform: translateX(38%);
        }
		.runlogo{
			width: 100%;
			font-size: .8rem;
			color: #e58056;
		}
		.runlogo>img{
			width: 17%;
			text-align: center;
			float: left;
			margin-left: 15%;
		}
		.runlogo>p{
			display: inline-block;
		}
	.ydh-bg{
		min-height:200px;
		width: 70%; margin: 0 auto;
		/*padding: 100px 20px;*/
		/*-webkit-border-image: url("/static/images/sports/cert.jpg") 300 20 100 20 stretch stretch;*/
		/*border-width:300px 20px 100px 20px;*/
		/*width: 100px;border-color:#000;*/
		border:33px solid #000;
		-webkit-border-image:url(/static/images/sports/cert.jpg) 33 stretch;
		height: 45%;
	}
	/*.ydh-bg .name { width: 60px; margin-top: -30px;}*/
	.name{
		width: 80%;
		margin-top: 0;
	}
    </style>
	</head>
	<body class='certificate ac'>
		<img class='top' src='/static/images/sports/top.png' />
		<!-- <img class='cert' src='/static/images/sports/cert.jpg' /> -->
		<section class="ydh-bg">
			<img class="name" src='/static/images/sports/001.png' />
			<br>
			<p class='nickname'>{$result['nickName']}</p>
	        <p class='infor'>在虎扑跑步秋季线上运动会中完成了{$result['proCount']}个项目，表现出色，获得 “{$result['designation']}” 称号</p>
			<img class='aut' src='/static/images/sports/aut.png' />
			<div class='runlogo'>
				<img src='/static/images/sports/runlogo.png' />
				<p style='padding:0.9%;float:left;margin-left:1%;'>主办单位：虎扑跑步<br>颁发时间：{$result['date']}</p>
			</div>
        </section>
        <!-- <p class='datetime'>{$result['date']}</p> -->
		<!-- <div class='cert'> -->

		<!-- </div> -->


		<script>
			window.onload = function(){
				var rate = (375 / 603).toFixed(2);
				var height = document.body.clientHeight;
				// var width = document.body.clientWidth;
				var width = window.screen.width;
				// alert(width);
				var certificate = document.querySelector('.certificate');
				// document.body.style.width = Math.floor(rate * height) + 'px';
				// document.body.style.width = width + 'px';
				// certificate.style.width = width + 'px';

				// var nickname = document.querySelector('.nickname');
				// var infor = document.querySelector('.infor');
				// var aut = document.querySelector('.aut');
				// var runlogo = document.querySelector('.runlogo');
				// var cert = document.querySelector('.cert');
				//
				// if(width / height > 0.6){
				// 	nickname.style.top = '47%';
				// 	infor.style.top = '45%';
				// 	aut.style.top = '64%';
				// 	runlogo.style.top = '74%';
				// 	cert.style.bottom = '5%';
				// }
			};
		</script>
	</body>
</html>
